<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript库</title>
    <script src="https://lib.baomitu.com/lodash.js/latest/lodash.js"></script>
    <link rel="stylesheet" href="../style/common.css">
</head>
<body>
    <h1>Lodash示例</h1>
    <p class="msg"></p>
    <p>
        <button id="throttle">节流（throttle）</button>
        <button class="debounce">防抖（debounce）</button>
    </p>
    <p class="throttle"></p>
    <p class="debounce"></p>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");

            let objects = [{ a:1 },{b:2}];
            let shallow = _.clone(objects);
            msg.innerHTML += `浅拷贝 : ${shallow[0] === objects[0]}<br>`;
            let deep = _.cloneDeep(objects);
            msg.innerHTML += `深度拷贝 : ${shallow[0] === objects[0]}<br>`;

            let objArr = [{"n":4},{"n":2},{"n":8},{"n":6},];
            msg.innerHTML += `按指定迭代求平均值${_.meanBy(
                objArr,
                (o) => o.n
                )}<br>`;

            msg.innerHTML += `按指定属性求平均值${_.meanBy(
            objArr,
            "n"
            )}<br>`;

            //排序
            let users = [
                {"user":"fred","age":48},
                {"user":"barnehy","age":36},
                {"user":"angle","age":40},
                {"user":"smile","age":34},
                
            ];
            console.log(_.sortBy(users,o=>o.user));//按照字典排序
            console.log(_.sortBy(users,["user","age"]));

            //防抖
            let throttle = document.querySelector(".throttle");
            document.getElementById("throttle").addEventListener(
                "click",
                _.throttle(function () {
                    console.log("throttle");
                    throttle.innerHTML += `${new Date().toLocaleDateString()}<br>`;
                },5000)
            );
            //节流
            let debounce = document.querySelector(".debounce");
            document.getElementById("debounce").addEventListener(
                "click",
                _.debounce(function () {
                    console.log("debounce");
                    debounce.innerHTML += `${new Date().toLocaleDateString()}<br>`;
                },5000)
            );
        });
    </script>
</body>
</html>